@import './mixins/mixin.scss';

@include b(cell){
    --cell-padding-x-size: 24px;
    --cell-padding-y-size: 24px;
    --cell-font-size:12px;
    --cell-line-size:14px;
    --cell-bg-color:var( --color-white );
    --cell-border-color:var( --border-color-smoke-2 );
    position: relative;
    background-color: var( --cell-bg-color );
    font-size: var( --cell-font-size ) var( --cell-padding-y-size );
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cell-padding-y-size) var(--cell-padding-x-size);
    line-height: var(--cell-line-size);
    @include e(title){
      text-align: left;
      display: flex;
      align-items: center;
  

    }

    @include e(value){
        text-align: right;
        flex:1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    &:after {
        content: "";
      border-bottom: 1px solid  var(--cell-border-color);
        position: absolute;
        left: var(--cell-padding-x-size);
        right: var(--cell-padding-x-size);
        bottom: 0;
      }

}